import React from 'react';
import { inject, observer} from 'mobx-react';
import {routerShape} from 'react-router';
import {Condition} from '../list/listCondition';
import {WeaErrorPage, WeaTools, WeaTop, WeaSearchGroup, WeaRightMenu, WeaPopoverHrm, WeaSelect,WeaAlertPage} from 'ecCom';
import {Button,Spin} from 'antd';
import {WeaLocaleProvider} from 'ecCom';
import {Text} from '../util/text';
const text = new Text();
const getLabel = WeaLocaleProvider.getLabel;

@inject("searchStore")
@observer
class Search extends React.Component {
    static contextTypes = {
        router: routerShape
    }
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        const {searchStore} = this.props;
        searchStore.initDatas();
    }

    componentWillReceiveProps(nextProps) {
        const {searchStore} = this.props;
        if (this.props.location.key !== nextProps.location.key) {
            searchStore.initDatas();
        }
    }
    render() {
        const { searchStore } = this.props;
        const { loadingSpin, isRight,status:{loading}, form,condition} = searchStore;
        if (loadingSpin) {
            return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hntm9c`} size="large"/></div>
        }
        if (!isRight) {
            return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@1xjhsg`}><div>{getLabel(382663, '暂无权限') }</div></WeaAlertPage>
        }
        let title = "";
        title = text.SEARCHREPORTINFO;
        return (
            <div className='info-query'>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@5colib`} datas={this.getRightMenu() }>
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@5zavhy`}
                        title={title}
                        loading={loading}
                        icon={<i className='icon-coms-government' />}
                        iconBgcolor='#f14a2d'
                        buttons={[]}
                        buttonSpace={10}
                        showDropIcon={true}
                        dropMenuDatas={this.getRightMenu() } >
                        <div className='info-query-condition'>
                            <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@a39iuj`} listStore={searchStore} form={form} condition={condition} onEnterSearch={this.forwardQueryResult.bind(this)}></Condition>
                        </div>
                        <div className='info-query-btns'>
                            {this.getSearchButtons() }
                        </div>
                    </WeaTop>
                </WeaRightMenu>
            </div>
        )
    }
    getRightMenu() {
        let btns = [];
        btns.push({
            key: "search",
            icon: <i className='icon-coms-search'/>,
            content: text.SEARCH,
            onClick: this.forwardQueryResult.bind(this)
        });
        return btns;
    }
    getSearchButtons() {
        const { searchStore } = this.props;
        const {clearFormFields} = searchStore;
        const btnStyle = { borderRadius: 3, height: 28, width: 80 }
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@z4qx5r@forwardQueryResult`} type="primary" style={btnStyle} onClick={this.forwardQueryResult.bind(this) }>{text.SEARCH }</Button>),
            (<span style={{ width: '15px', display: 'inline-block' }}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wjl8c6@clearFormFields`} type="ghost" style={btnStyle} onClick={() => { clearFormFields(); } }>{text.RESET }</Button>)
        ]
    }
    forwardQueryResult() {
        const { searchStore } = this.props;
        const path = "/searchResult?from=search";
        this.context.router.push({
            pathname: "/main/info" + path
        });
    }
}

export default WeaTools.tryCatch(React,
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@q75cpo`} msg={ props.error ? props.error : getLabel(383324, '对不起，该页面异常，请联系管理员') } />,
    { error: "" }
)(Search);